<template>
	<view class="page-suspension">
		<image class="page-suspension-bj" :src="navbarData.src"></image>
		<view class="top_bgimg" :style="'height:'+topBarHeight+'px;'">
			<view class="top_cont" :style="'height:'+ tabBarHeight+'px;margin-top:'+stateBarHeight+'px;'">
				<image src="https://web.suqzp.com/public/jiantou2.png" mode="aspectFit"  @click="gotoBack" class="back-pre"></image>
				<text class="fc-ff">{{navbarData.title}}</text>
			</view>
		</view>
		<view :style="'height:'+topBarHeight+'px;'"></view>
		<view class="content-l">
			<view class="userinfo" >
				<view class="flex">
					<view class="face"><image :src="userInfo.avatar || (imgSrcUrl + 'head.png')"></image></view>
					<view class="info">
						<view class="username">
							{{userInfo.nickname}}					
						</view>
						<view class="integral" v-if="ismember !='N'">会员于{{userDetail.memberTime}}到期</view>
						<view v-else class="fc-ff">未开通</view>
					</view>	
				</view>
				<view class="height-45"></view>
				<view>套餐类型</view>
				<view class="qy-wap mar-top-48">
					<view class="order flex">
						<view class="line"><image src="https://web.suqzp.com/public/line.png"></image></view>
						<view class="txt1 fc-e4b">会员权益</view>
						<view class="line"><image src="https://web.suqzp.com/public/line.png"></image></view>
					</view>
					<view class="flex mar-top-35">
						<view class="qy-list" v-for="(item,index) in qylist" :key="index">
							<image :src="item.img"></image>
							<view class="fc-e4b">{{item.name}}</view>
						</view>
					
					</view>
				</view>
			</view>			
			<!-- 购买 -->
			<view class="agreement" v-if="ismember =='N'">
				<view class="flex mar-bot-42">
					<radio-group @change="radioGroup"><radio color="#84C0F4" :value="1"  :checked="true" style="transform:scale(0.72);"></radio></radio-group>
					<view class="agreement2">
						已同意并同意《***协议》
					</view>
				</view>
				<button class="purchase-btn" @click="RechargeVip()">9.9元终身会员（至尊VIP会员）</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
		data() {
			return {
				imgSrcUrl: this.$mConfig.imgSrcUrl,
				topBarHeight: 0, //状态栏加导航栏高度
				stateBarHeight: 0, //导航栏高度
				tabBarHeight: 50, //状态栏高度
				//顶部数据
				navbarData:{
					title:'升级会员',
					src:'https://web.suqzp.com/public/bg1.png'
				},
				ismember:uni.getStorageSync('isVip'),
				qylist:[
					{ name: '人才公寓',img: this.$mConfig.imgSrcUrl+'v1.png'},
					{ name: '特价房', img: this.$mConfig.imgSrcUrl+'v2.png'},
					{ name: '线下培训', img: this.$mConfig.imgSrcUrl+'v3.png'},
					{ name: '简历刷新', img: this.$mConfig.imgSrcUrl+'v4.png'},
					{ name: '赠送道具',img: this.$mConfig.imgSrcUrl+'v5.png'},
					{ name: '专属客服',img: this.$mConfig.imgSrcUrl+'v6.png'},
					{ name: '智能匹配', img: this.$mConfig.imgSrcUrl+'v7.png'},
					{ name: '个性简历', img: this.$mConfig.imgSrcUrl+'v8.png'}
				],
				radioValue: 1,//协议选择
				userDetail:'',
			}
		},
		mounted: function() {
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.stateBarHeight = res.statusBarHeight
					// #ifdef MP-WEIXIN
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let paddingSize = menuButtonInfo.top - self.stateBarHeight
					self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
					self.topBarHeight = menuButtonInfo.bottom + paddingSize
					// #endif
					
					// #ifdef APP-NVUE || APP-PLUS 
					let menuRect = wx.getMenuButtonBoundingClientRect()
					self.topBarHeight = menuRect.top + menuRect.height
					// #endif
					
				},
			})	
			this.getUserDetail()
		},
		methods:{
			//顶部返回
			gotoBack(){
				uni.navigateBack({
					url:"/pages/index/user"
				})
			},
			//协议同意
			radioGroup(e) {
				this.radioValue = e.detail.value;				
			},
			//获取用户信息			
			async getUserDetail(){
				let res= await this.$apis.getUserDetail(uni.getStorageSync('wxuser_id'));
				if(res){
					this.userDetail = res.data
				}				
			},
			//vip充值
			async RechargeVip(){				
				let res = await this.$apis.RechargeVip(uni.getStorageSync('openid'));
				if(res){
					var jsondata = JSON.parse( res.msg)					
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						appId:jsondata.appId,
						timeStamp:jsondata.timeStamp, // 时间戳
						nonceStr:jsondata.nonceStr, // 随机字符串
						package:jsondata.package,
						signType:jsondata.signType, // 签名算法
						paySign:jsondata.paySign,
						success: function (res) {
							console.log('支付成功',res);
							uni.navigateBack({
								delta: 1
							});
						},
						fail: function (err) {
							console.log('支付失败',err);
						}
					});
				}
			}
		
		}
	}
</script>

<style lang="scss">
	.page-suspension{
		position: relative;
		background-color: #313131;
		min-height: 100vh;
	}
/* //背景图片 */
.page-suspension-bj {
	width: 100%;
	position: absolute;
	left: 25%;
	top: 0%;
	transform: translate(-25%, 0);
	z-index: 1;
	display: block;
}
.userinfo {
	width: 92%;
	padding: 0 4%;
	position: absolute;
	z-index: 2;
	top: 190rpx;
	.face {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	.info {
		width: 92%;
		padding:0 4%;
		display: flex;
		flex-flow: wrap;
		padding-left: 30upx;
		flex: 1;
		.username {
			width: 100%;
			color: #fff;
			font-size: 40upx;
			.vip-img{
				width: 64rpx;
				height: 32rpx;
				display: inline-block;
				position: relative;
				top: 4rpx;
			}
			.rz-img{
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
				position: relative;
				top: 4rpx;
			}
		}
		.integral {
			display: flex;
			align-items: center;
			height: 40upx;
			color: #fff;
			border-radius: 20upx;
			font-size: 24upx;
		}
	}
	.qy-wap{
		background:#c7b4a81c;
		border-radius: 8rpx;
		padding: 20rpx 0 40rpx;
		.order{
			width: 272rpx;
			margin: 0rpx auto;					
			.line{
				width:56rpx;
				height: 4rpx;
				position: relative;
				top: 24rpx;
				border: none;
				image{
					width:56rpx;
					height: 4rpx;
					display: inline-block;
				}
			}
			.txt1{
				line-height: 48rpx;
				padding: 0 10rpx;
			}
		}				
		.qy-list{
			width: 25%;
			text-align: center;
			margin-bottom: 20rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				display: inline-block;
			}
			
		}
	}
}
.agreement {
	margin-top: 50upx;
	position: absolute;
	bottom: 274rpx;
	z-index: 2;
	padding: 0 32rpx;
	.agreement2{
		line-height: 46rpx;
		color: #fff;
	}
	.purchase-btn{
		width: 592rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #D2A078 0%, #69503C 100%);
		border-radius: 8rpx;
		margin: 0 auto;
		color: #fff;
		line-height: 88rpx;
		margin-left: 48rpx;
	}
}
</style>
